<template>
  <div class="conservation-resources">
    <ContentWrap>
      <el-button @click="handleAdd" size="large" :icon="Plus">上传</el-button>
      <el-button @click="handleAdd" size="large" :icon="Plus">批量上传</el-button>
    </ContentWrap>
    <el-tabs type="border-card">
      <div style="height: 560px">
        <el-auto-resizer>
          <template #default="{ height, width }">
            <el-table-v2 :columns="columns" :data="data" :width="width" :height="height" fixed />
          </template>
        </el-auto-resizer>
      </div>
      <el-pagination
        :current-page="tableModule.currentPage"
        :page-size="tableModule.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableModule.count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-tab-pane label="视频类" />
      <el-tab-pane label="音频类" />
      <el-tab-pane label="图片类" />
      <el-tab-pane label="PDF类" />
      <el-tab-pane label="电子书类" />
      <el-tab-pane label="文档类" />
      <el-tab-pane label="其他类" />
    </el-tabs>
    <modelForm ref="modelFormRef" />
  </div>
</template>
<script lang="tsx" setup>
import { Search, Refresh, Plus } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import dayjs from 'dayjs'
import * as FormApi from '@/api/knowledge/area'
import modelForm from './nodeDialog.vue'
const modelFormRef = ref()

const formLabelWidth = '80px'
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

// 表格数据
const tableModule = reactive({
  tableData: [], // 表格数据
  currentPage: 1, // 表格分页：当前页
  pageSize: 10, // 表格分页：每页显示条目个数
  count: 1 // 表格分页：总记录数
})

// 重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  ElMessage({
    message: '重置成功',

    showClose: true,
    type: 'success'
  })
}
// 分页：pageSize 改变时会触发
const handleSizeChange = (val: number) => {
  tableModule.pageSize = val
  getData()
}

// 分页：currentPage 改变时会触发
const handleCurrentChange = (val: number) => {
  tableModule.currentPage = val
  getData()
}
const onSubmit = async (formEl: FormInstance | undefined) => {
  console.log(formEl)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const generateData = (columns: ReturnType<typeof generateColumns>, length = 200, prefix = 'row-') =>
  Array.from({ length }).map((_, rowIndex) => {
    return columns.reduce(
      (rowData, column, columnIndex) => {
        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
        return rowData
      },
      {
        id: `${prefix}${rowIndex}`,
        parentId: null
      }
    )
  })

import type { FormInstance, FormRules, Column, UploadProps } from 'element-plus'
const columns: Column<object>[] = [
  {
    key: '所属知识库',
    title: '所属知识库',
    dataKey: '所属知识库',
    width: 200,
    align: 'center',
    cellRenderer: ({ cellData: id }) => <div>{id}</div>
  },
  {
    key: '节点名称',
    title: '节点名称',
    dataKey: '节点名称',
    width: 200,
    align: 'center',
    cellRenderer: ({ cellData: id }) => <div>{id}</div>
  },
  {
    key: '节点图片',
    title: '节点图片',
    dataKey: '节点图片',
    width: 200,
    align: 'center',
    cellRenderer: ({ cellData: id }) => <div>{id}</div>
  },
  {
    key: '节点介绍',
    title: '节点介绍',
    dataKey: '节点介绍',
    width: 200,
    align: 'center',
    cellRenderer: ({ cellData: id }) => <div>{id}</div>
  },
  {
    key: '节点类型',
    title: '节点类型',
    dataKey: '节点类型',
    width: 200,
    align: 'center',
    cellRenderer: ({ cellData: id }) => <div>{id}</div>
  },
  {
    key: '创建时间',
    title: '创建时间',
    dataKey: '创建时间',
    width: 200,
    align: 'center',
    cellRenderer: ({ cellData: createTime }) => (
      <ElTooltip content={dayjs(createTime).format('YYYY/MM/DD')}>
        {<span class="flex items-center">{dayjs(createTime).format('YYYY/MM/DD')}</span>}
      </ElTooltip>
    )
  },
  {
    key: '操作',
    title: '操作',
    cellRenderer: (data) => (
      <>
        <el-button onClick={edit.bind(this, 'edit', data)} type="success" text>
          修改
        </el-button>
        <el-button onClick={deleteFcn.bind(this, data)} type="danger" text>
          删除
        </el-button>
        <el-button onClick={deleteFcn.bind(this, data)} type="danger" text>
          资源维护
        </el-button>
      </>
    ),
    width: 200,
    align: 'center'
  }
]
const data = generateData(columns, 200)

// 添加
const handleAdd = () => {
  modelFormRef.value.open()
}
// 修改
const edit = (operationType: string, data: any) => {
  modelFormRef.value.open()
}
// 删除
const deleteFcn = (data: any) => {
  ElMessageBox.confirm('确定永久删除该条数据吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      console.log(data.rowData.id)
      FormApi.deleteHybaseGraph(data.rowData.id)
        .then((res: any) => {
          ElMessage({
            type: 'success',

            showClose: true,
            message: '删除已完成'
          })
          getTableData()
        })
        .catch((error: any) => {
          ElMessage({
            message: error,

            showClose: true,
            type: 'error'
          })
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',

        showClose: true,
        message: '删除已取消'
      })
    })
}
</script>
<style lang="scss" scoped>
.conservation-resources {
  .search {
    .el-form-item {
      margin: 0 32px 0 0;
    }
  }
}

.demo-form-inline .el-input {
  --el-input-width: 230px;
}

.demo-form-inline .el-select {
  --el-select-width: 230px;
}

::v-deep(.el-tabs__item) {
  padding: 0 50px !important;
}
</style>
